<template>
	<view class="my">
		<!-- <image v-if="userId" style="width: 0;height: 0;position: absolute;top: 0;left: 0;" :src="`https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg`" mode=""></image> -->
		<view class="section">
			<view class="top">
				<template v-if="token">
					<view class="left">
						<view class="name">
							<text>{{ userInfo.realName || '姓名：未填写' }}</text>
							<view v-if="userInfo.userType" class="tag">合伙人</view>
							<view v-else class="tag">普通用户</view>
						</view>
						<view class="desc">{{ info.companyName || '公司名称：未填写' }}</view>
					</view>
					<view class="avatar">
						<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="scaleToFill"></image>
						<open-data v-else type="userAvatarUrl"></open-data>
					</view>
				</template>
				<template v-else>
					<view class="left" @tap="login">
						<view class="name">未登录</view>
						<view class="desc">请点击登录</view>
					</view>
					<!-- <image :src="userInfo.avatar" mode="" class="avatar"></image> -->
					<view class="avatar" @tap="login">
						<open-data type="userAvatarUrl"></open-data>
					</view>
				</template>
			</view>
			<view class="bottom">
				<view class="title">
					<view>我的应用</view>
					<view class="sub-title">私域运营</view>
				</view>
				<view class="item-box">
					<view v-if="token && userInfo && userInfo.realName && info.companyName" class="item">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-1.png" mode=""></image>
						<text>分享名片</text>
						<button open-type="share"></button>
					</view>
					<view v-if="!(token && userInfo && userInfo.realName && info.companyName)" class="item"
						@tap="share">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-1.png" mode=""></image>
						<text>分享名片</text>
					</view>
					<view class="item" @tap="goShare">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-2.png" mode=""></image>
						<text>海报拓客</text>
					</view>
					<view class="item" @tap="goCard">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-3.png" mode=""></image>
						<text>名片夹</text>
					</view>
					<view class="item" @tap="goEdit">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-4.png" mode=""></image>
						<text>名片装修</text>
					</view>
					<view v-if="display" class="item" @tap="goVideo">
						<image src="https://ywtmp.hnwytkj.com/static/images/icon-5.png" mode=""></image>
						<text>视频拓客</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="token" class="btn" @tap="logout">退出登录</view>
		<loginModal ref="loginModal" @success="success" />
		<CustomTabBar :selected="4" :display="display"/>
	</view>
</template>

<script>
import http from '@/utils/http.js'
import loginModal from '@/components/login/index.vue'
import CustomTabBar from '@/components/CustomTabBar/index.vue'
export default {
	components: {
		loginModal,
		CustomTabBar
	},
	data() {
		return {
			token: '',
			userId: '',
			params: {
				pageSize: 10,
				pageNo: 1,
				visiedname: ''
			},
			info: {},
			userInfo: {},
			list: [],
			total: 0,
			loading: false,
			isEnd: false,
			display: 0
		}
	},
	onLoad() {
		uni.hideTabBar()
		uni.removeStorageSync('selectedIndex');
	},
	onShow() {
		this.userId = uni.getStorageSync('userId')
		this.token = uni.getStorageSync('token')
		if (this.token) {
			this.getCompanyInfo()
			this.getData()
		}
	},
	methods: {
		success() {
			this.userId = uni.getStorageSync('userId')
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getCompanyInfo()
				this.getData()
			}
		},
		login() {
			// uni.navigateTo({
			// 	url: '/pages/login/index'
			// })
			this.$refs.loginModal.open()
		},
		share(e) {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
				return false
			}
			console.log(this.userInfo);
			if (!this.userInfo.realName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善个人信息，无法分享',
					confirmText: '去完善',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editEnterpriseInformation'
							})
						}
					}
				})
				return false
			}
			if (!this.info.companyName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善企业信息，无法分享',
					confirmText: '去完善',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editProfile'
							})
						}
					}
				})
				return false
			}
		},
		goShare(e) {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
				return false
			}
			uni.navigateTo({
				url: '/pagesA/my/poster'
			})
		},
		goCard() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
				return false
			}
			uni.navigateTo({
				url: '/pagesA/my/cardHolder'
			})
		},
		goEdit() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
				return false
			}
			// uni.navigateTo({
			// 	url: '/pagesA/module/enterpriseDecoration'
			// })
			uni.navigateTo({
				url: '/pagesA/edit/editCard'
			})
		},
		goVideo() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
				return false
			}
			uni.navigateTo({
				url: '/pagesA/my/videoList'
			})
		},
		logout() {
			uni.removeStorageSync('token')
			uni.removeStorageSync('refreshToken')
			uni.removeStorageSync('userId')
			this.token = ''
			// uni.reLaunch({
			// 	url: '/pages/index/index'
			// })
		},
		loadMore() {
			if (this.loading || this.isEnd) return;
			this.params.pageNo++;
			this.getData();
		},
		getCompanyInfo() {
			http({
				url: 'card/user-profile/get'
			}).then(res => {
				if (res.code === 0) {
					this.display = res.data.display || 0
					this.info = res.data.companyProfileDO
					this.userInfo = res.data.userProfileDO
				}
			})
		},
		getData() {
			this.loading = true;
			http({
				url: 'card/user-profile/businesscard/page',
				data: {
					...this.params
				}
			}).then(res => {
				this.loading = false;
				if (res.code === 0) {
					this.list = this.list.concat(res.data.list)
					this.total = res.data.total
					if (this.list.length >= this.total) {
						this.isEnd = true
					}
				}
			})
		},
		saveShare() {
			const userId = uni.getStorageSync('userId')
			if (userId) {
				http({
					url: 'card/user-profile/like/update',
					method: 'put',
					data: {
						userId,
						type: 1
					}
				})
			}
		},
	},
	onShareAppMessage(e) {
		const userId = uni.getStorageSync('userId')
		this.saveShare()
		if (userId) {
			return {
				title: '您好，这是我的名片，请惠存',
				// path: '/pagesA/share/card?id=' + userId, // 分享的路径
				path: `/pagesA/share/card?id=${userId}&encrypted=${this.userInfo.level}`, // 分享的路径
				// imageUrl: '/static/images/share.jpg' // 可选，分享图片的路径
				imageUrl: `https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg?t=${Math.random()}` // 可选，分享图片的路径
			}
		} else {
			return false
		}

	}
}
</script>

<style lang="scss" scoped>
.my {
	min-height: 100vh;
	background-color: #F0F0F4;
	background-image: linear-gradient(180deg, #4B73FF, #F0F0F4);
	background-size: 100% 447rpx;
	background-repeat: no-repeat;
	padding: 40rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-family: PingFang SC;

	.section {
		height: 792rpx;
		background: #EEF2FF;
		border-radius: 20rpx;

		.top {
			padding: 30rpx 40rpx 40rpx;
			height: 220rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.name {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					display: flex;
					align-items: center;
					.tag {
						margin-left: 20rpx;
						padding: 0 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: #4B73FF;
						border-radius: 10rpx;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}

				.desc {
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					margin-top: 30rpx;
				}
			}

			.avatar {
				width: 150rpx;
				height: 150rpx;
				background: #FFFFFF;
				border-radius: 50%;
				border: 6rpx solid #90BCFF;
				box-sizing: border-box;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom {
			height: 572rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;

			// display: flex;
			// align-items: center;
			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;

				.sub-title {
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					margin-left: 20rpx;
				}
			}

			.item-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 138rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-bottom: 40rpx;
					position: relative;

					image {
						width: 138rpx;
						height: 140rpx;
						margin-bottom: 20rpx;
					}

					button {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 10;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}
			}
		}
	}

	.btn {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #4B73FF;
		margin-top: 30rpx;
	}
}
</style>